1
00:00:00,540 --> 00:00:01,750
Hello Elizabeth.

2
00:00:01,760 --> 00:00:02,040
Sure.

3
00:00:02,040 --> 00:00:07,410
We are going to be creating that extend all see assess file.

4
00:00:07,450 --> 00:00:12,440
We used to start up the project.

5
00:00:12,820 --> 00:00:16,980
I've got my CFS file file open here.

6
00:00:16,980 --> 00:00:19,480
This is a blank file.

7
00:00:19,500 --> 00:00:26,180
So this is where I'm going to be had in the CSA styling war the way this is going to work.

8
00:00:26,190 --> 00:00:31,110
I'm going to add the stylin and then I'll explain what this time line does.

9
00:00:31,170 --> 00:00:35,720
So you then have to watch me all is typing.

10
00:00:35,810 --> 00:00:36,320
All right.

11
00:00:36,330 --> 00:00:46,170
I have added the stylin that we use for this project for the external source as far So to start to apply

12
00:00:46,170 --> 00:00:48,040
Siling to a CML.

13
00:00:48,060 --> 00:00:54,530
You need to have a select select should be in the element you want to style.

14
00:00:55,020 --> 00:01:02,520
So the body here is the selector and what I'm saying is that I want the background colour for your body

15
00:01:02,640 --> 00:01:03,980
to be value.

16
00:01:04,010 --> 00:01:08,830
I have specified in hex value so you can specify the column names.

17
00:01:08,850 --> 00:01:16,500
If you know or use hex decimal values so if you want to know more by its values or what various hex

18
00:01:16,500 --> 00:01:20,940
columns you could just do a Google search you will see a lot more colours.

19
00:01:21,180 --> 00:01:28,340
So that's an H selector has to be enclosed in a daily basis.

20
00:01:28,410 --> 00:01:36,860
The opening and closing and then you specify your style property on the left followed by call on hand

21
00:01:36,870 --> 00:01:42,030
then the value on the right followed by a semicolon the semicolon is important.

22
00:01:42,030 --> 00:01:45,360
If you missed out the stylin will not work.

23
00:01:45,360 --> 00:01:56,300
Line 7 I am stylin the wrapper for the project will it be like a container that will wrap or the other

24
00:01:56,310 --> 00:01:57,400
content.

25
00:01:57,690 --> 00:02:02,180
So have set it to it with the hash tag.

26
00:02:02,190 --> 00:02:13,200
This is an idea I have set with 750 pixels height 350 pixels background colour of specified a name rather

27
00:02:13,200 --> 00:02:16,530
than a hex value marjane from the top.

28
00:02:16,530 --> 00:02:18,070
All I'm saying is that from.

29
00:02:18,090 --> 00:02:21,900
Margin refers to disperse outside the element.

30
00:02:21,900 --> 00:02:26,480
What I am saying here on line 11 is that I want from the top.

31
00:02:26,490 --> 00:02:31,630
I want the space Second want it to drop 120 pixels move down.

32
00:02:31,650 --> 00:02:33,000
That's what I'm saying.

33
00:02:33,090 --> 00:02:39,870
Margin from the left I'm saying from the left I want you to move two hundred and twenty pixels.

34
00:02:39,900 --> 00:02:41,590
That's what that meant.

35
00:02:41,710 --> 00:02:47,480
Right so that's it for that rapine and then we've got the button.

36
00:02:47,550 --> 00:02:52,470
Apply some styling to the button the button is what you click to check.

37
00:02:52,470 --> 00:02:59,430
If you got the answers right or not this darleen have applied to the button here the hash tag again

38
00:02:59,440 --> 00:02:59,870
means.

39
00:02:59,900 --> 00:03:05,720
That's an idea which I defined indication Gitmo document background colour.

40
00:03:05,730 --> 00:03:07,640
I've said it to read again.

41
00:03:07,650 --> 00:03:10,640
I have used that name rather than a hex value.

42
00:03:10,800 --> 00:03:14,910
Law refers to the colour of the actual text in the button.

43
00:03:15,300 --> 00:03:20,730
Pad refers to the space inside the element.

44
00:03:20,730 --> 00:03:24,610
I've said it a 12 pixels which means each.

45
00:03:25,020 --> 00:03:30,960
Each element will have four corners so that 12 pixels would be applied to all four corners.

46
00:03:30,960 --> 00:03:38,550
Top right bottom left border style left Setti to none and the bottom side can give the bottom gives

47
00:03:38,550 --> 00:03:39,680
the button a shadow.

48
00:03:39,690 --> 00:03:47,250
So I've said none which means there'll be no shadow around the button font weight which is how bold

49
00:03:47,370 --> 00:03:55,320
the front will be or how thick set it to bold and they will just give you an A with of a hundred pixels

50
00:03:55,400 --> 00:04:03,300
white so that is all the stylin we need for the external farts.

51
00:04:03,300 --> 00:04:12,820
I just save that and we can go back to our projet just refresh.

52
00:04:15,880 --> 00:04:19,480
See what it looks like.

53
00:04:19,550 --> 00:04:24,950
All right so this is what the projet looks like now with the new external style sheet applied again.

54
00:04:24,960 --> 00:04:31,470
There's no interaction because the javascript has not been implemented but once that's done we should

55
00:04:31,470 --> 00:04:35,450
be able to see some interactivity with this game.

56
00:04:35,670 --> 00:04:37,880
So that's it for this election.

57
00:04:37,920 --> 00:04:39,150
Thanks for watching.

58
00:04:39,150 --> 00:04:40,140
Bye for now.